<template>
  <div class="footer-bar">
    <div class="btns-bottom">
      <div class="nav-flex" v-if="!noIcons">
        <slot name="icons"></slot>
      </div>
      <div class="btn-flex" v-if="!noBtns">
        <slot name="btns"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
      noIcons : {
          type:Boolean,
          default:false
      },
      noBtns : {
          type:Boolean,
          default:false
      },

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'

.footer-bar
  height: $footer-height
  background: #fff
  fine-border(top, $border-light)
  position: fixed !important
  left: 0
  right: 0
  bottom: 0
  z-index: 99
  .btns-bottom
    height: 100%
    display: flex
    align-items: stretch;
    .nav-flex > div
      height: 100%
      flex: 1
      display: flex
      align-items: center
      justify-content: center
      .nav-item
        flex: 1
        padding: 0
        & + &
          fine-border(left, $border-light)
    .btn-flex > div
      height: 100%
      display: flex
      flex: 1
      align-items: center
      justify-content: center
      .btn
        flex: 1
        height: 100%
        border-radius: 0
</style>
